<template>
	<div class="box">
		<div class="header2">
			<div class="head1-top">
				<h5>津港安全信息上报</h5>
			</div>
		</div>
		<div class="head1-con">
			<div class="head1-con-top">
				<div>
					上报时间:
					<el-date-picker range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" v-model="value1" type="daterange">
					</el-date-picker>
					当前状态:
					<el-select v-model="value">
					</el-select>
					是否采纳:
					<el-select v-model="value">
					</el-select>
					<el-button type="success" class="a" @click="dialogFormVisible = true"><i class="el-icon-plus"></i>新建</el-button>
					<el-button type="primary">查询</el-button>
					<el-button>重置</el-button>
				</div>
			</div>
			<div class="table">
				<el-table :data="tableData" style="width: 100%" class="tablebox">
					<el-table-column prop="date" label="序号" width="80">
					</el-table-column>
					<el-table-column prop="name" label="标题" width="180">
					</el-table-column>
					<el-table-column prop="address" label="报送人">
					</el-table-column>
					<el-table-column prop="address" label="签发人">
					</el-table-column>
					<el-table-column prop="address" label="信息类别">
					</el-table-column>
					<el-table-column prop="address" label="当前状态">
					</el-table-column>
					<el-table-column prop="address" label="是否采纳">
					</el-table-column>
					<el-table-column prop="address" label="上报时间">
					</el-table-column>
					<el-table-column prop="address" label="操作">
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div>
			<el-dialog :visible.sync="dialogFormVisible" class="tc">
				<h5>津港安全信息上报信息编辑添加</h5>
				<div class="jbxx">
					<h3>基本信息</h3>
					<h6>标题</h6>
					<el-input placeholder="标题"></el-input>
					<h6>信息内容<span>(不少于150字，不超过4000字)</span></h6>
					<p>字数不足</p>
					<el-input type="textarea" :rows="2" placeholder="信息内容">
					</el-input>
					<div class="pf">
						<div class="pf-one">
							<h6 class="a">报送人</h6>
							<el-input placeholder="报送人"></el-input>
						</div>
						<div class="pf-one">
							<h6 class="a">签发人</h6>
							<el-input placeholder="签发人"></el-input>
						</div>
						<div class="pf-one">
							<h6 class="a">信息级别</h6>
							<el-select>
							</el-select>
						</div>
					</div>
				</div>
				<div class="fjxx">
					<h3>附件信息</h3>
					<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" >
						<div slot="tip" class="el-upload__tip">1.只能上传jpg/png文件</div>
						<div slot="tip" class="el-upload__tip">2.文件大小不超过5MB</div>
						<div slot="tip" class="el-upload__tip">3.不上传可能导致信息不通过</div>
						<el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">关闭</el-button>
					<el-button type="primary" @click="dialogFormVisible = false">暂存</el-button>
					<el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogTableVisible: false,
				dialogFormVisible: false,
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				formLabelWidth: '120px'
			}
		}
	}
</script>

<style>
	.el-dialog__wrapper::-webkit-scrollbar{
		overflow-y: hidden;
	}
	.header2 {
		background: #F2F2F2;
		margin: 10px 0px 10px 20px;
		border: #A4DDFF 1px solid;
	}

	.head1-top {
		background: #E6F7FF;
	}

	.head1-top h5 {
		padding: 6px 0px 6px 10px;
		margin: 0px;
		font-size: 16px;
	}

	.head1-con {
		background: white;
		height: 500px;
		/* padding: 0 20px; */
	}

	.head1-con-top {
		padding: 20px 0px;
		display: flex;
		justify-content: space-between;
	}

	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 200px;
	}

	.el-input__inner {
		width: 200px;
	}

	.a {
		margin-left: 10px;
	}

	.el-table th,
	.el-table tr {
		background-color: #FAFAFA;
	}

	.el-dialog {
		width: 1140px;
		height: 700px;
		margin-left: 200px;
	}

	.el-dialog__body {
		padding: 10px 20px;
	}

	.el-dialog__header {
		padding: 0px;
	}

	.tc h5 {
		margin: 0px;
		padding: 10px 0px;
		border-bottom: 1px solid #F9F9F9;
	}

	h3 {
		padding: 0px 0px 10px 0px;
		border-bottom: 1px solid #F9F9F9;
	}

	.jbxx {
		padding: 0px 20px;
	}

	.fjxx {
		padding: 0px 20px;
	}

	h6 {
		margin: 10px 0px;
	}

	.jbxx p {
		color: #FF6161;
	}

	.pf {
		display: flex;
		justify-content: space-between;
		margin: 25px 0px;
	}

	.pf-one {
		flex: 1;
	}

	.jbxx .el-input__inner {
		width: 300px;
	}
	.el-dialog{
		margin-top: 0px!important;
		margin-bottom: 0px!important;
	}
</style>
